<template>
  <!--弹窗-->
  <el-dialog :title="title" :visible.sync="visible" :before-close="handleClose" width="500px">
    <el-form :rules="rules" ref="formData" :model="formData" label-width="100px" style="width: 400px" status-icon>
      <el-form-item label="名称：" prop="name">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item label="备注：" prop="remark">
        <el-input v-model="formData.remark" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入内容"></el-input>
      </el-form-item>
      <el-form-item align="right">
        <el-button size="mini" @click="handleClose">取 消</el-button>
        <el-button size="mini" type="primary" @click="submitForm('formData')">确 定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
  import api from '@/api/role'
import { valid } from 'mockjs';
export default {
  data() {
   return {
   rules: { // 校验规则
   name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }]
   }
   }
  },
  // 接收父组件传递的属性
  props: {
    visible: {
      //弹出隐藏
      type: Boolean,
      default: false
    },
    title: {
      // 标题
      type: String,
      default: ''
    },
    formData: {
      // 表单数据
      type: Object,
      default: {}
    },
    remoteClose: Function // 用于关闭窗口
  },
  methods: {
    // 关闭弹窗
    handleClose(done) {
      this.$refs['formData'].resetFields()
      this.remoteClose()
    },
    //提交表单
    submitForm(formName) {
      this.$refs[formName].validate((valid) =>{
        if(valid){
          this.submitData()
        }else{
          return false;
        }
      })
    },
    async submitData(){
      //let response = await api.add(this.formData)
      let response = null
      if(this.formData.id){
         response = await api.update(this.formData)
      }else{
        response = await api.add(this.formData)
      }
      if(response.code === 20000){
        this.$message({
          message:'保存成功',
          type:'success'
        })
        this.handleClose()
      }else{
        this.$message({
          type:'error',
          message:'保存失败'
        });
      }
    }
  }
};
</script>

<style></style>
